﻿<%@ Page Title="" Language="C#" MasterPageFile="~/master/m.master" %>

<script runat="server">

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
       <style type="text/css">
        img.face{max-width: 200px;max-height: 200px;}
        button.fa:before{margin-right: 5px}
        dl{}
        dl dt{float: left;text-align: right;padding: 0 15px}
        dl dd{float:left;width: calc(100%-50px)}
        nav ul.pagination{margin: 0}
        #pro-list-choosen div.thumbnail>img ,
        #pro-list-to-choose div.thumbnail>img {
            height: 150px
        }
        div.thumbnail > .caption > h4 {
            white-space: nowrap;
            overflow: hidden
        }
        .mix-images div.thumbnail>img {height:350px}
        ul.product-color-list{margin: 0;padding:0}
        ul.product-color-list li {
            float: left;
            width:250px;
            margin: 5px;
            border: 1px solid #efefef;
            list-style: none
        }
        ul.product-color-list li.selected{border: 1px solid #ff1493}
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="main" Runat="Server">
     <div class="row">
      
       <div class="col col-md-4">
           <div class="panel panel-primary">
               <div class="panel-heading">封面图片</div>
               <div class="panel-body">
                   <div class="row">
                       <div class="progress">
                           <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0%;">0%</div>
                       </div>
                       <div class="mix-images"></div>
                       <div class="col col-md-12  upload-panel">
                           <div class="thumbnail">
                               <div id="div-addImage" style="width: 100%; text-align: center; border: 1px solid #cacaca; padding: 138px 0;"><i class="fa fa-plus fa-5x"></i></div>
                           </div>
                       </div>
                   </div>
               </div>
               <div class="panel-footer hidden">
                   <div style="display: none">
                      <%-- <asp:FileUpload runat="server" multiple="multiple" accept="image/jpeg" />--%>
                       <input type="file" multiple="multiple" accept="image/jpeg"/>
                   </div>
                   <p><button type="button" class="btn btn-warning fa fa-upload">上传</button></p>
               </div>
           </div>
       </div>
   </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="footer" Runat="Server">
    <script src="../assets/js/bootbox.min.js"></script>
    <div style="display:none">
    <div id="dialog-product-choose-color" >
        <ul class="product-color-list clearfix"></ul>
    </div>
</div>
 <script id="p1" type="text/html">
   <div class="col col-md-12">
        <div class="thumbnail">
            <img src="../assets/img/s.gif" style="background-image: url({{d.Url}});background-size: contain;background-repeat: no-repeat;    background-position: center;"/>
            <div class="caption">
                <p>
                    <button type="button" class="btn btn-danger fa fa-remove" data-id="{{d.ID}}"
                         >移除</button></p>
            </div>
        </div>
    </div>
</script>
    <script type="text/javascript">
        (function ($) {
            $('.progress').hide();

            function deleteImage(id) {
                A.API('Image','Remove', {
                    id:id
                }, function(data) {
                    $('.upload-panel').fadeIn();
                });
            }
            function addImage(file) {
                file.Url = Y.GetPath(file.Url);
                var tpl = laytpl(document.getElementById('p1').innerHTML);
                var result = tpl.render(file);
                var el = $(result);
                var btnRemove = el.find('button.fa-remove');
                btnRemove.click(function () {
                    bootbox.confirm("确认删除?",
                        function(result) {
                            if (result) {
                                deleteImage($(this).data('id'));
                                $(btnRemove).parents('div.col:first').remove();
                                $('button.fa-save').prop('disabled', false);
                                $('.upload-panel').fadeIn();
                              //  $('button.fa-save').prop('disabled', false);
                            }
                        });
                });
                $('.mix-images').append(el);
            }

           
            function addOldImage(file) {
                file.Url = Y.GetPath(file.Url);
                var tpl = laytpl(document.getElementById('p1').innerHTML);
                var result = tpl.render(file);
                var el = $(result);
                var btnRemove = el.find('button.fa-remove');
                btnRemove.click(function () {
                    bootbox.confirm("确认删除?",
                       function (result) {
                           if (result) {
                               deleteImage($(this).data('id'));
                               $(btnRemove).parents('div.col:first').remove();
                               $('button.fa-save').prop('disabled', false);
                               $('.upload-panel').fadeIn();
                               //  $('button.fa-save').prop('disabled', false);
                           }
                       });
                });
                $('.mix-images').append(el);
            }
            
            Kmer.Uploader({
                el: 'input[type=file]',
                Path: 'USER',
                OnProgress:function(f, pc) {
                    $('.progress').show();
                    $('.progress-bar').css('width', pc.toString() + '%').text(pc.toString() + '%');
                },
                OnAllComplete: function () {
                    $('.progress').hide();
                },
                OnComplete:function(f, data) {
                    if (data.Success === true) { 
                        var file = data.Data;
                        addImage(file);
                        $('.upload-panel').fadeOut();
                    } else {
                        bootbox.alert("上传错误，请重新选择图片（JPG、小于5Mbs）\n"+data.Message);
                    }
                }
                //, //不做限制
                //checkImageSize: function (w, h) {
                //    var r = (w % 130 === 0) && (h % 90 === 0) && w >= 520;
                //    if (r == false) {
                //        bootbox.alert("请上传520px X 360px的Jpg图片");
                //    }
                //    return r;
                //}
            });
            $('#div-addImage,button.fa-upload').click(function () {
                $('input[type=file]').click();   
            });
            
            //保存数据
            //$('button.fa-save').click(function() {
            //      //得到图片ID
            //        var imgs=[];
            //        $('div.mix-images button[data-id]').each(function(index,el){
            //            imgs.push($(el).data('id'));
            //        });
            //        var img = imgs[0];
            //        var dataToSave = {
            //            "Image": img
            //        };
            //});

            //获取数据
            //function GetList() {
            //    A.API('XXXHandler', 'XXXAction', {
            //    }, function (data) {
            //        if (data.Success === false) {
            //        } else {
            //            addOldImage({
            //                Title: '',
            //                ID: 'NOUSE',
            //                Url: data.Image
            //            });
            //            $('.upload-panel').fadeOut();
            //        }
            //    });
            //}
        })(jQuery);
    </script>
</asp:Content>

